<template>
	<view class="">
		<view class="top">
			<image class="topimg" src="../../static/back.png" mode="" @click="fanhui"></image>
			<view class="top1">
				<image src="../../static/img/fdj.png" mode=""></image>
				<input type="text" placeholder="输入要搜索的商品名称">
			</view>
			<view class="toptext">
				搜索
			</view>
			<view class="top2">
				<view class="top2dian"></view>
				<view class="top2dian"></view>
				<view class="top2dian"></view>
			</view>
		</view>

		<view class="listbox">
			<view class="listbox1">
				限时秒杀
			</view>
			<view class="listbox2">
				商品一
			</view>
		</view>
		<view class="shop">
			<view class="shop_cates">
				<scroll-view scroll-y="true" class="shop_cates_scroll">
					<view :class="cateindex == item.id ? 'shop_cates_scroll_item active' : 'shop_cates_scroll_item'"
						v-for="(item,index) in catelist" :key="index" @click="getdatalist(item)">{{item.title}}</view>
				</scroll-view>
			</view>

			<view class="shop_box">
				<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
					<view class="shop_box_guanggao">
						<image src="/static/img/guanggao.png" mode=""></image>
					</view>
					<shop-cate-item :data="item" v-for="(item,index) in catedatalist" :key="index"></shop-cate-item>
				</scroll-view>
			</view>
		</view>
	</view>

</template>

<script>
	import ShopCateItem from "@/components/ShopCateItem/ShopCateItem.vue"
	export default {
		data() {
			return {
				catelist: [{
						id: 1,
						title: '热门推荐'
					},
					{
						id: 2,
						title: '一级分类'
					}, {
						id: 3,
						title: '一级分类'
					}, {
						id: 4,
						title: '一级分类'
					}, {
						id: 5,
						title: '一级分类'
					},
				],
				cateindex: 0,
				catedatalist: []
			};
		},
		onLoad() {
			this.getcatelist()
		},
		methods: {
			getcatelist() {
				var that = this;
				that.$http('api/getcatelist', {}, function(res) {
					if (res.data.list) {
						// that.catelist = res.data.list;
						that.cateindex = res.data.list[0].id;
						that.catedatalist = res.data.list[0]['list'];
					}

				})
			},

			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			getdatalist(item) {
				var that = this;
				that.cateindex = item.id;
				that.catedatalist = item['list'];
			}
		},
		components: {
			ShopCateItem
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #fff;
	}

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		margin: 20rpx auto;

		.topimg {
			width: 30rpx;
			height: 46rpx;
		}

		.top1 {
			width: 466rpx;
			height: 100%;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 233px;
			height: 38px;
			background: #F5F6F7;
			border-radius: 8px 8px 8px 8px;
			opacity: 1;

			>image {
				margin-left: 20upx;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.toptext {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			// line-height: 0px;
		}

		.top2 {
			display: flex;

			.top2dian {
				margin-right: 6rpx;
				width: 5px;
				height: 5px;
				background: #333333;
				border-radius: 2px;
				opacity: 1;

			}
		}
	}

	.listbox {
		display: flex;
		width: 95%;
		margin: 20rpx auto;

		.listbox1 {
			margin-right: 20rpx;
			width: 122rpx;
			height: 42rpx;
			background: #F6F6F6;
			border-radius: 4px 4px 4px 4px;
			opacity: 1;
			font-size: 22rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #969696;
			text-align: center;
			line-height: 42rpx;
		}

		.listbox2 {
			margin-right: 20rpx;
			width: 122rpx;
			height: 42rpx;
			background: #F6F6F6;
			border-radius: 20px 20px 20px 20px;
			opacity: 1;
			font-size: 22rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #969696;
			text-align: center;
			line-height: 42rpx;
		}
	}

	.shop {
		height: 100%;
		display: flex;

		&_cates {
			width: 200upx;
			height: 100%;

			&_scroll {
				width: 100%;
				height: 100%;
				background-color: rgb(246, 246, 246);

				&_item {
					width: 100%;
					box-sizing: border-box;
					padding-left: 16upx;
					height: 84upx;
					line-height: 84upx;
					font-size: 28upx;
					font-weight: 400;
					color: #666;
				}

				.active {

					border-left: #e05907 10upx solid;
					background-color: #fff;
					color: #333;
					font-weight: 700;
				}
			}
		}

		&_box {
			flex: 1;
			box-sizing: border-box;
			padding: 0 10upx 0 30upx;
			height: 100%;

			&_guanggao {
				width: 524upx;
				height: 150upx;
				border-radius: 10upx;
				padding-top: 30upx;

				>image {
					width: 100%;
					height: 100%;
					border-radius: 10upx;
				}
			}
		}
	}
</style>
